<template>
  <div class="content-wrap">
    <div class="report-history-content">
      <div class="top-panel">
        <Form
          class="report-history-form"
          ref="historyFilterForm"
          v-model="filterFormData"
          :label-width="120"
        >
          <Row>
            <Col span="6">
              <FormItem label="提交时间">
                <DatePicker
                  v-model="filterFormData.date"
                  type="daterange"
                  :options="dateOption"
                  placement="bottom-start"
                  placeholder="Select date"
                  :clearable="false"
                ></DatePicker>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="查看类型">
                <Select v-model="filterFormData.type" style="width: 200px">
                  <Option
                    v-for="item in typeOptionList"
                    :key="item.type"
                    :value="item.type"
                    >{{ item.typeName }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="伙食单位">
                <Select v-model="filterFormData.unitCode" style="width: 200px">
                  <Option
                    v-for="item in dropSelectList"
                    :key="item.id"
                    :value="item.unitCode"
                  >
                    {{ item.unitName }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col  class="button-wrap">
              <Button type="primary" class="mr_24"  @click="(pages.page = 1), handleSubmit()"
                >查询</Button
              >
              <Button @click="handleReset()" 
                >重置
              </Button>
            </Col>
          </Row>
          <!-- <Row>
            <Col span="24" class="button-wrap">
              <Button type="primary" @click="handleSubmit()">查询</Button>
              <Button @click="handleReset()" style="margin-left: 8px"
                >重置
              </Button>
            </Col>
          </Row> -->
        </Form>
      </div>
      <div class="bottom-panel">
        <cusTable
          border
          :loading="loading"
          :columns="columns"
          :data="dataList"
          :bottomClass="['cus-page']"
        >
          <template slot-scope="{ row }" slot="operation">
            <div class="flex">
              <Button
                type="primary"
                size="small"
                :style="{ color: '#ffffff', padding: '0 8px' }"
                @click="goToDetail(row)"
              >
                详情
              </Button>
            </div>
          </template>
        </cusTable>
        <div>
          <cus-page
            :data="pages"
            class="cus_page mt_20"
            @pageChange="handleSubmit()"
          ></cus-page>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSubCanteenList,
  getAuditLog,
  getLogTypeList,
} from "@/api/organ/organization";
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "伙食单位",
          key: "unitName",
          align: "center",
        },
        {
          title: "类型",
          key: "typeName",
          align: "center",
        },
        {
          title: "采购周期",
          key: "dataPeriod",
          align: "center",
        },
        {
          title: "审核状态",
          key: "auditStateName",
          align: "center",
        },
        {
          title: "提交时间",
          key: "submitTime",
          align: "center",
        },
        {
          title: "操作",
          width: 250,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      dataList: [],
      dateOption: {
        shortcuts: [
          {
            text: "最近周",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            },
          },
          {
            text: "最近月",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            },
          },
        ],
      },
      filterFormData: {
        date: [
          new Date(
            new Date().setHours(0, 0, 0) -
              (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
          ),
          new Date(
            new Date().setHours(0, 0, 0) +
              (7 - new Date().getDay()) * 24 * 60 * 60 * 1000
          ),
        ],
        type: "all",
        unitCode: "all",
      },
      selectLabel: "",
      dropSelectList: [{ unitCode: "all", unitName: "全部" }],
      typeOptionList: [{ type: "all", typeName: "全部" }],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 325; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.getSubCanteenList();
    this.getLogTypeList();
    this.handleSubmit();
  },
  methods: {
    handleSubmit() {
      this.loading = true;
      let params = {};
      params.submitTimeStart = this.filterFormData.date[0].Format("yyyy-MM-dd");
      params.submitTimeEnd = this.filterFormData.date[1].Format("yyyy-MM-dd");
      params.type =
        this.filterFormData.type == "all" ? "" : this.filterFormData.type;
      params.unitCode =
        this.filterFormData.unitCode == "all"
          ? ""
          : this.filterFormData.unitCode;
      (params.currentPage = this.pages.page),
        (params.pageSize = this.pages.pageSize),
        getAuditLog(params).then((res) => {
          if (res.code == 1) {
            this.loading = false;
            this.dataList = res.data.list;
            this.pages.pageTotal = res.data.total;
          }
        });
    },
    handleReset() {
      this.filterFormData.date = [
        new Date(
          new Date().setHours(0, 0, 0) -
            (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
        ),
        new Date(
          new Date().setHours(0, 0, 0) +
            (7 - new Date().getDay()) * 24 * 60 * 60 * 1000
        ),
      ];
      this.filterFormData.type = "all";
      this.filterFormData.unitCode = "all";
      this.handleSubmit();
    },
    handleSelectChange(data, item) {
      if (this.filterFormData.unit === item.value) {
        // 重复点击同一个节点时依然保持选中状态
        item.selected = true;
      } else {
        // 不需要重复点击同一个节点时重新赋值
        this.selectLabel = item.title;
        this.filterFormData.unit = item.value;
        // this.$emit("on-select-change", item);
      }
    },
    getSubCanteenList() {
      getSubCanteenList().then((res) => {
        if (res.code == 1) {
          this.dropSelectList = this.dropSelectList.concat(res.data.list);
        }
      });
    },
    getLogTypeList() {
      getLogTypeList().then((res) => {
        if (res.code == 1) {
          this.typeOptionList = this.typeOptionList.concat(res.data);
        }
      });
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 290; // 表格自适应高度
        console.log(this.tableHeight);
      }, 100);
    },
    // 循环判断是否含有权限
    goToDetail(row) {
     let toPage = row.typeName
      console.log(this.$router.options.routes);
      let route =
        this.$router.options.routes[this.$router.options.routes.length - 1];
      let flag = this.$cu.getPermission(toPage, route.children);
      if (!flag) {
        this.$Message.error("权限不足，请联系管理员");
      } else {
        this.$router.push({
          name: toPage,
          query: {
            reportForms: JSON.parse(row.extendJson),
            id: row.dataId,
            dataPeriod: row.dataPeriod,
          },
        });
      }
      // this.$router.push({
      //   path: '/view/reportingManagement/procurementPlan',
      //   query: {
      //     id: row.dataId,
      //     dataPeriod: row.dataPeriod
      //   }
      // }
      // );
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
